<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../css/style-reset.css">
		<title>老师资料</title>

		<style>
			/* header */
			.head{
				padding: 15px;
				background-color: #fff;
				border-bottom: 1px solid #dcdcdc;
				margin-bottom: 10px;
			}
			.avatar{
				position: relative;
				display: block;
				width: 80px;
				height: 80px;
				margin: 0 auto;
				border: none;
				border-radius: 50%;
				-webkit-border-radius: 50%;
			}
			.avatar img{
				width: 100%; 
				height: 100%;
				border: none;
				border-radius: 50%;
				-webkit-border-radius: 50%;
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.honour{
				position: absolute;
				bottom: -25px;
				right: -25px;
			}
			.honour span{
				padding: 1px;
				border: none;
				border-radius: 2px;
				font-size: 13px;
				color: #fff;
			}
			.honour .a{
				background-color: #53ceca;
			}
			.honour .b{
				background-color: #f55e1c;
			}
			p.info{
				text-align: center;
				margin-top: 8px;
				font-size: 18px;
				font-weight: 600;
			}
			p.c-item{
				text-align: center;
				margin-top: 10px;
				color: #b4b4b4;
				font-size: 0;
			}
			p.c-item span{
				display: inline-block;
				padding: 0 5px;
				font-size:  14px;
				border-right: 1px solid #dcdcdc;
			}
			p.c-item span:last-child{
				border-right: none;
			}
			.content ul.intro{
				padding: 0;
				border: none;
				text-align: center;
				font-size: 0;
				margin-top: 15px;
				margin-bottom: 15px;
			}
			ul.intro li{
				display: inline-block;
				width: 60px;
				font-size: 13px;
			}
			ul.intro li:nth-child(2){
				margin: 0 30px;
			}
			ul.intro li span{
				display: block;
				text-align: center;
			}
			span.intro-t{
				background-color: #53ceca;
				color: #fff;
				font-size: 14px;
				font-weight: 600;
				padding: 3px 5px;
				border: none;
				border-radius: 2px;
			}
			span.intro-b{
				margin-top: 5px;
				font-size: 14px;
				color: #42455c;
			}
			.content ul.other-info{
				padding: 0;
				border: none;
				text-align: center;
			}
			.content ul.other-info{
                margin-bottom: 0;
                text-align: center;
			}
			ul.other-info li{
				display: inline-block;
				font-size: 0;
			}
			ul.other-info li:nth-child(2){
				margin: 0 10px;
			}
			ul.other-info li span{
				display: inline-block;
			}
			ul.other-info .check-icon{
				width: 12px;
				height: 12px;
				background-image: url(../images/icons/check.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin-right: 4px;
			}
			ul.other-info .check{
				font-size: 15px;
				color: #b4b4b4;
			}
			/* 专业背景、体式照片 title */
			.content ul{
				padding: 10px;
				margin-bottom: 10px;
				border-top: 1px solid #dcdcdc;
				border-bottom: 1px solid #dcdcdc;
				background-color: #fff;
			}
			.content ul:first-child{
				border-top: none;
			}
			.title{
				font-size: 0;
				padding-bottom: 4px;
			}
			.left-border{
				display: inline-block;
				width: 5px;
				height: 16px;
				margin-right: 5px;
				background-image: url(../images/icons/purpose_title.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.title .sub-title{
				font-size: 14px;
				color: #53ceca;
				vertical-align: top;
			}
			/* 专业背景 */
			.pro-bg li{
				position: relative;
				padding: 7px 5px;
				font-size: 13px;
			}
			.pro-bg .left{
				position: absolute;
				left: 5px;
			}
			.pro-bg .right{
				display: block;
				width: 75%;
				margin-left: 70px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.look-more{
				margin-top: 10px;
			}
			.look-more p{
				text-align: center;
				color: #53ceca;
				font-size: 14px;
			}
			/* 体式照片 */
			.bd-style .pic{
				display: inline-block;
				width: 60px;
				height: 60px;
				margin-right: 10px;
			}
			ul.pictures{
				border: none;
				height: 60px;
				padding: 0;
				padding-bottom: 20px; /* 根据手机端的效果 再做调整*/
				margin: 10px 0;
				overflow-y: hidden; /* 如何去掉滚动条 */
				white-space: nowrap;
			}
			.pic img{
				display: inline-block;
				width: 60px;
				height: 60px;
				border: none;
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<!-- header -->
			<div class="head">
				<div class="avatar">
					<img src="../images/avatar.jpg" alt="">
					<span class="honour">
						<span class="a">理</span>
						<span class="b">名</span>
					</span>
				</div>
				<p class="info">默瀚
				</p>
				<p class="c-item">
					<span>艾扬格</span>
					<span>脊柱保养</span>
					<span>减肥塑形</span>
				</p>
				<ul class="intro">
					<li>
						<span class="intro-t">10级</span>
						<span class="intro-b">老师等级</span>
					</li>
					<li>
						<span class="intro-t">12节</span>
						<span class="intro-b">授课数</span>
					</li>
					<li>
						<span class="intro-t">5.0分</span>
						<span class="intro-b">好评度</span>
					</li>
				</ul>
				<ul class="other-info">
					<li>
						<span class="check-icon"></span>
						<span class="check">中英双语</span>
					</li>
					<li>
						<span class="check-icon"></span>
						<span class="check">可上门</span>
					</li>
					<li>
						<span class="check-icon"></span>
						<span class="check">10年教龄</span>
					</li>
				</ul>
			</div>	
			<!-- 专业背景 -->
			<ul class="pro-bg">
				<div class="title">
					<span class="left-border"></span>
					<span class="sub-title">专业背景</span>
				</div>
				<li>
					<span class="left">上课方式</span>
					<span class="right">私教可上门，中英双语</span>
				</li>
				<li>
					<span class="left">个人认证</span>
					<span class="right">悠季瑜伽资深教师证书</span>
				</li>
				<li>
					<span class="left">荣誉证书</span>
					<span class="right">国际瑜伽大赛获奖证书</span>
				</li>
				<li>
					<span class="left">教学经验</span>
					<span class="right exper">2008年1月毕业于悠季瑜伽教师培训课程。并获得印度Kaicalyadhama G.S. 瑜伽研究学院瑜伽教师证书。2010年6月12日参加国际瑜伽</span>
				</li>
				<div class="look-more">
					<p>查看更多</p>
					<!-- <ul>待做</ul> -->
				</div>
			</ul>
			<!-- 体式照片 -->
			<ul class="bd-style">
				<div class="title">
					<span class="left-border"></span>
					<span class="sub-title">体式照片</span>
				</div>
				<ul class="pictures">
					<li class="pic">
						<img src="../images/1.png" alt="">
					</li>
					<li class="pic">
						<img src="../images/1.png" alt="">
					</li>
					<li class="pic">
						<img src="../images/1.png" alt="">
					</li>
					<li class="pic">
						<img src="../images/1.png" alt="">
					</li>
					<li class="pic">
						<img src="../images/1.png" alt="">
					</li>
					<li class="pic">
						<img src="../images/1.png" alt="">
					</li>
					<li class="pic">
						<img src="../images/1.png" alt="">
					</li>
					</ul>
			</ul>
		</div>
	</body>
</html>